import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { DownOutlined, PlusOutlined, InfoCircleOutlined} from '@ant-design/icons';
import { Input, Modal, InputNumber, Upload, Button, Icon, Select, Radio, Card, Col, Checkbox, DatePicker, Tabs,Switch,message,TimePicker,Drawer,Dropdown,Menu,Divider,Tooltip,Row} from 'antd';
import { formatMessage, FormattedMessage} from 'umi-plugin-react/locale';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import React, { useState, useRef } from 'react';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { queryRule, updateRule, queryEmojiItemRule, removeEmojiItemRule,addEmojiItemRule, updateEmojiItemRule} from '../service';
import styles from '../style.less';
import { bdExec } from '@/helpers/RequestHelper';
import EmojiForm from './EmojiForm';
import DictoryForm from './DictoryForm';
import * as RequestHelper from '@/helpers/RequestHelper';
import DataLang from './DataLang';

// 导入自定义组件1
import PreviewForm from '@/components/PreviewForm';
import * as BdHelper from '@/utils/BdHelper';
import * as DataHelper from '@/helpers/DataHelper';
import * as TsxHelper from '@/helpers/TsxHelper';
import moment from 'moment';
import { buildIdCheckboxOption, buildSelectOption } from '@/helpers/TsxHelper';

// 常量
const { TextArea } = Input;
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { TabPane } = Tabs;

// 定义: 数据表单属性
interface DataFormProps extends FormComponentProps {
  // dataModalVisible: boolean;
  isUpdate: boolean
  dataFormValues: any
  common: any
}

/**
* 添加节点
* @param fields
*/
const handleAdd = async (fields: any) => {
  return RequestHelper.bdExec({
      fn: addEmojiItemRule,
      args: fields,
      successMsg: formatMessage({ id: 'app.base.store-success' }),
      failMsg: formatMessage({ id: 'app.base.api-exception' }),
  });
};

/**
* 更新节点
* @param fields
*/
const handleUpdate = async (fields: any) => {
  return RequestHelper.bdExec({
      fn: updateEmojiItemRule,
      args: fields,
      successMsg: formatMessage({ id: 'app.base.update-success' }),
      failMsg:  formatMessage({ id: 'app.base.api-exception' }),
  });
};

// @ts-ignore
/**
*  删除节点
*/
const handleRemove = async (selectedRows: any[]) => {
  if (!selectedRows) return true;
  const ids:any = selectedRows.map(row => row.id).toString();
  return RequestHelper.bdExec({
      fn: removeEmojiItemRule,
      args: {ids},
      successMsg: formatMessage({ id: 'app.base.destroy-success' }),
      failMsg:  formatMessage({ id: 'app.base.api-exception' }),
      hasLoading: false
  });
};

const handleUpdateItem = async (fields: any) => {
  return bdExec({fn: updateEmojiItemRule, args: fields, successMsg: '更新成功',failMsg: '更新失败请重试！'});
};



// 数据表单
const DataForm: React.FC<DataFormProps> = props => {
  // 组件属性
  const { form, common, isUpdate, dataFormValues } = props;

  // 图片状态
  const [picture, setPicture] = useState<any[]>([]);
  const [uploadChanged, setUploadChanged] = useState<boolean>(false);
  const [pictureAnonymity, setPictureAnonymity] = useState<any[]>([]);
  const [uploadAnonymityChanged, setUploadAnonymityChanged] = useState<boolean>(false);
  const [previewModelVisible, handlePreviewModalVisible] = useState<boolean>(false);
  const [previewImg, setPreviewImg] = useState('');
  const [apiState, setApiState] = useState<any>({common:{}});

  const [drawerVisible,setDrawerVisible] = useState<boolean>(false);
  const [emojiValue, setEmojiValue] = useState<any>({});
  const [itemIsUpdate, setItemIsUpdate] = useState<boolean>(false);
  // const [dataModalVisible, handleDataModalVisible] = useState<boolean>(false);
  const [dictoryIsUpdate, setDictoryIsUpdate] = useState<boolean>(false);
  const [dictoryModalVisible, handleDictoryModalVisible] = useState<boolean>(false);
  const [dataLangModalVisible, handleDataModalVisible] = useState<boolean>(false);
  const [nameListLang, setnameList] = useState<any>(common?.languagesOption);
  const [fieldTitle, setFieldTitle] = useState<any>('');
  

  const [parentId, setParentId] = useState<any>('');
  // 选中的记录
  const [rowKeys, setRowKeys] = useState<string[]|number[]>([]);

  const actionRef = useRef<ActionType>();
  const itemActionRef = useRef<ActionType>();



  const parseData = (key:any,options:any) => {
    // console.log(options);
    var name:any = '';
    if(Array.isArray(options) && options.length>0){
      options.map(item=>{
        if(item.alias_key == key){
          name = item?.item_value;
        }
      })
    }
    return name
  }

  const [siteDescJson, setSiteDescJson] = useState<any>(parseData('post_limit_prompt',dataFormValues)?.lang_json_arr || []);
    //提交表单
    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        console.log("submit fields ", fieldsValue)
        var submitValue = [
            {
              //请求当前一组配置参数，tag=editorPosts
              "alias_key": 'editorPosts',
              "item_type":'system',
              "dict_item_arr": [
                {
                  "alias_key": "post_ask",
                  "item_value": fieldsValue.post_ask,
                  'item_type':"select",
                },
                {
                  "alias_key": "post_email_verify",
                  "item_value": fieldsValue.post_ask.indexOf('post_email_verify') >-1 ? true:false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key": "post_phone_verify",
                  "item_value": fieldsValue.post_ask.indexOf('post_phone_verify') >-1 ? true:false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key": "post_prove_verify",
                  "item_value": fieldsValue.post_ask.indexOf('post_prove_verify') >-1 ? true:false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key": "post_limit_status",
                  "item_value": fieldsValue.post_limit_status,
                  'item_type':"radio",
                },
                {
                  "alias_key": "post_limit_type",
                  "item_value": fieldsValue.post_limit_type,
                  'item_type':"select",
                },
                // {
                //   "alias_key": "post_limit_date_start",
                //   "item_value": fieldsValue.post_limit_type == '1' ? moment(fieldsValue.post_limit_date[0]).format("YYYY-MM-DD") : '',
                //   'item_type':"text",
                // },
                // {
                //   "alias_key": "post_limit_date_end",
                //   "item_value": fieldsValue.post_limit_type == '1' ? moment(fieldsValue.post_limit_date[1]).format("YYYY-MM-DD") : '',
                //   'item_type':"text",
                // },
                {
                  "alias_key": "post_limit_period_start",
                  "item_value": fieldsValue.post_limit_type == '1' ? moment(fieldsValue.post_limit_period?fieldsValue.post_limit_period[0]:null).format("YYYY-MM-DD HH:mm:ss") : '',
                  'item_type':"datetime-local",
                },
                {
                  "alias_key": "post_limit_period_end",
                  "item_value": fieldsValue.post_limit_type == '1' ? moment(fieldsValue.post_limit_period?fieldsValue.post_limit_period[1]:null).format("YYYY-MM-DD HH:mm:ss") : '',
                  'item_type':"datetime-local",
                },
                {
                  "alias_key": "post_limit_cycle_start",
                  "item_value": fieldsValue.post_limit_type == '2' ? moment(fieldsValue.post_limit_cycle_start).format("HH:mm:ss") : '',
                  'item_type':"time",
                },
                {
                  "alias_key": "post_limit_cycle_end",
                  "item_value": fieldsValue.post_limit_type == '2' ? moment(fieldsValue.post_limit_cycle_end).format("HH:mm:ss") : '',
                  'item_type':"time",
                },
                {
                  "alias_key": "post_limit_rule",
                  "item_value": fieldsValue.post_limit_rule,
                  'item_type':"radio",
                },
                {
                  "alias_key": "post_limit_prompt",
                  "item_value": siteDescJson.length>0 ? siteDescJson[0].lang_content : '',
                  'item_type':"textarea",
                  'lang_json': siteDescJson,
                },
                {
                  "alias_key": "post_edit",
                  "item_value": fieldsValue.post_edit,
                  'item_type':"radio",
                },
                {
                  "alias_key": "post_edit_timelimit",
                  "item_value": fieldsValue.post_edit_timelimit,
                  'item_type':"number",
                },
                {
                  "alias_key": "post_edit_sticky",
                  "item_value": fieldsValue.post_edit_sticky,
                  'item_type':"radio",
                },
                {
                  "alias_key": "post_edit_essence",
                  "item_value": fieldsValue.post_edit_essence,
                  'item_type':"radio",
                },
                {
                  "alias_key": "post_editor_service",
                  "item_value": fieldsValue.post_editor_service,
                  'item_type':"select",
                },
                {
                  "alias_key":'post_editor_number',
                  "item_value": fieldsValue.post_editor_number,
                  'item_type':"checkbox",
                },
                {
                  "alias_key":'post_editor_group',
                  "item_value": fieldsValue.post_editor_number.indexOf('post_editor_group') > -1 ? true : false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key":'post_editor_title',
                  "item_value": fieldsValue.post_editor_number.indexOf('post_editor_title') > -1 ? true : false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key":'post_editor_emoji',
                  "item_value": fieldsValue.post_editor_number.indexOf('post_editor_emoji') > -1 ? true : false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key":'post_editor_image',
                  "item_value": fieldsValue.post_editor_number.indexOf('post_editor_image') > -1 ? true : false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key":'post_editor_video',
                  "item_value": fieldsValue.post_editor_number.indexOf('post_editor_video') > -1 ? true : false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key":'post_editor_audio',
                  "item_value": fieldsValue.post_editor_number.indexOf('post_editor_audio') > -1 ? true : false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key":'post_editor_doc',
                  "item_value": fieldsValue.post_editor_number.indexOf('post_editor_doc') > -1 ? true : false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key":'post_editor_mention',
                  "item_value": fieldsValue.post_editor_number.indexOf('post_editor_mention') > -1 ? true : false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key":'post_editor_hashtag',
                  "item_value": fieldsValue.post_editor_number.indexOf('post_editor_hashtag') > -1 ? true : false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key":'post_editor_expand',
                  "item_value": fieldsValue.post_editor_number.indexOf('post_editor_expand') > -1 ? true : false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key":'post_editor_lbs',
                  "item_value": fieldsValue.post_editor_number.indexOf('post_editor_lbs') > -1 ? true : false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key":'post_editor_anonymous',
                  "item_value": fieldsValue.post_editor_number.indexOf('post_editor_anonymous') > -1 ? true : false,
                  'item_type':"checkbox",
                },
                {
                  "alias_key": "post_editor_group_required",
                  "item_value": fieldsValue.post_editor_group_required || parseData('post_editor_group_required',dataFormValues),
                  'item_type':"radio",
                },
                {
                  "alias_key": "post_editor_title_view",
                  "item_value": fieldsValue.post_editor_title_view || parseData('post_editor_title_view',dataFormValues),
                  'item_type':"radio",
                },
                {
                  "alias_key": "post_editor_title_required",
                  "item_value": fieldsValue.post_editor_title_required || parseData('post_editor_title_required',dataFormValues),
                  'item_type':"radio",
                },
                {
                  "alias_key": "post_editor_title_word_count",
                  "item_value": fieldsValue.post_editor_title_word_count || parseData('post_editor_title_word_count',dataFormValues),
                  'item_type':"number",
                },
                {
                  "alias_key": "post_editor_word_count",
                  "item_value": fieldsValue.post_editor_word_count || parseData('editor_post_word_count',dataFormValues),
                  'item_type':"number",
                },
                {
                  "alias_key": "post_editor_brief_count",
                  "item_value": fieldsValue.post_editor_brief_count || parseData('post_editor_brief_count',dataFormValues),
                  'item_type':"number",
                },
                {
                  "alias_key":"post_limit_whitelist",
                  "item_value": fieldsValue.post_limit_whitelist,
                  'item_type':"checkbox",
                }
              ]
            }
        ]
        console.log("submit submitValue ", submitValue)
        // 如果更新成功之后，重置表单
        updateRule({config_json: JSON.stringify(submitValue)}).then((res:any) => {
          console.log('handleSubmit then success is ', JSON.stringify(submitValue))
          if(res.code == 0){
            message.success('保存成功');
          }else{
            message.error(res.message);
          }
        })
  
      });
    };

  // 表单提交
  const handleSubmitDataForm = (value:any,title:any) => {
    console.log(value,241)
    setnameList(value)
    if(title == "post_limit_prompt"){
      setSiteDescJson(value);
    }
    handleDataModalVisible(false)
  }


const getEmojiTableData = (params:any) => {
  return queryEmojiItemRule(params).then((res:any) => {
      // setApiState(res.data)
      return res.data.listData
  })
}

  // 设置上传文件值
  const setUploadFile = (fileList:any) => {
    setUploadChanged(true)
    let fileArr = DataHelper.getLastUploadFile(fileList)
    console.log("fileArr is ", fileArr)
    if(fileArr.length > 0){
      setPicture(fileArr)
      setPreviewImg(fileArr[0].file_url)
    }else if(fileArr.length === 0){
      console.log('set picture []')
      setPicture([])
    }
  }

    // 设置Anonymity上传文件值
    const setAnonymityUploadFile = (fileList:any) => {
      setUploadAnonymityChanged(true)
      let fileArr = DataHelper.getLastUploadFile(fileList)
      console.log("fileArr is ", fileArr)
      if(fileArr.length > 0){
        setPictureAnonymity(fileArr)
        setPreviewImg(fileArr[0].file_url)
      }else if(fileArr.length === 0){
        console.log('set picture []')
        setPictureAnonymity([])
      }
    }

    const getTableData = (params:any) => {
      return queryRule(params).then((res:any) => {
          setApiState(res.data)
          return res.data.listData
      })
    }


  

  // 弹出框
  // @ts-ignore
  return <div>
    <Card title={''} className={styles.card} bordered={false}>
      <Row>
        <Col span={14}>
          <FormItem
          labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}
          label={
            <span>
              <FormattedMessage id="发表帖子要求" />
            </span>
          }>
            {form.getFieldDecorator('post_ask', {
              initialValue: [parseData('post_email_verify',dataFormValues) ? 'post_email_verify':'',parseData('post_phone_verify',dataFormValues) ? 'post_phone_verify' : '', parseData('post_prove_verify',dataFormValues) ? 'post_prove_verify' : ''] || [],
            })(
              <Checkbox.Group onChange={(list)=>{console.log(list)}}>
                <Checkbox value={'post_email_verify'}>已绑定邮箱</Checkbox>
                <Checkbox value={'post_phone_verify'}>已绑定手机号</Checkbox>
                <Checkbox value={'post_prove_verify'}>已实名认证</Checkbox>
              </Checkbox.Group>
          )}
          </FormItem>
          
        </Col>
        <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}>用户必须满足所选条件才能发表内容</span>
        </Col>
        </Row>
        <Row>
        <Col span={14}>
          <FormItem
          labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}
          label={
            <span>
              <FormattedMessage id="发表帖子开放时间" />
            </span>
          }>
            {form.getFieldDecorator('post_limit_status', {
              initialValue: parseData('post_limit_status',dataFormValues),
              // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
            })(<Radio.Group buttonStyle="solid">
            <Radio value={false}>关闭特殊规则</Radio>
            <Radio value={true}>开启特殊规则</Radio>
          </Radio.Group>)}
          </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}> 全员有效，优先级大于角色规则要求</span>
        </Col>
        </Row>
        {
        form.getFieldValue('post_limit_status') == true &&
        <Row justify={'start'}>
        <Col style={{display: 'flex', justifyContent: 'flex-start',}}>
          <Card title="规定时间配置" type="inner"  style={{width: "52.5%",marginLeft: '12%'}}>
            <FormItem label={'规则类型'}>
              {form.getFieldDecorator('post_limit_type', {
                initialValue: parseData('post_limit_type',dataFormValues),
              })(<Select placeholder={formatMessage({ id: 'app.base.please_select' })} size={'default'} style={{ width: '100%' }}>
                <Option value="1">指定某个时间段限制</Option>
                <Option value="2">指定每天的某个时间段限制</Option>
                </Select>)}
            </FormItem>
            {form.getFieldValue('post_limit_type') == '1' &&
                <FormItem label={'日期范围'}>
                  {form.getFieldDecorator('post_limit_period', {
                    initialValue: [parseData('post_limit_period_start',dataFormValues) ? moment(parseData('post_limit_period_start',dataFormValues), 'YYYY-MM-DD HH:mm:ss') : moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), parseData('post_limit_period_end',dataFormValues) ? moment(parseData('post_limit_period_end',dataFormValues), 'YYYY-MM-DD HH:mm:ss') : moment(new Date(), 'YYYY-MM-DD HH:mm:ss')] ,
                  })(<RangePicker showTime  format="YYYY-MM-DD HH:mm:ss" size={'default'} style={{ width: '100%' }} >
                </RangePicker>)}
                </FormItem>
            }
            {form.getFieldValue('post_limit_type') == '2' &&
            <>
            <FormItem label={'日期范围'}>
                <FormItem style={{ width: '50%',display:'inline-block' }}>
                  {form.getFieldDecorator('post_limit_cycle_start', {
                    initialValue: parseData('post_limit_cycle_start',dataFormValues)  != ""  ? moment(parseData('post_limit_cycle_start',dataFormValues),'HH:mm:ss'):'',
                  })(<TimePicker  size={'default'} style={{ width: '100%' }} >
                </TimePicker>)}
                </FormItem>
                <FormItem style={{ width: '50%',display:'inline-block' }}>
                  {form.getFieldDecorator('post_limit_cycle_end', {
                    initialValue: parseData('post_limit_cycle_end',dataFormValues)  != "" ? moment(parseData('post_limit_cycle_end',dataFormValues),'HH:mm:ss'):'',
                  })(<TimePicker  size={'default'} style={{ width: '100%' }} >
                </TimePicker>)}
                </FormItem>
                </FormItem>
            </>
            }
            <FormItem label={'规则要求'}>
              {form.getFieldDecorator('post_limit_rule', {
                initialValue: parseData('post_limit_rule',dataFormValues),
                // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
              })(<Radio.Group buttonStyle="solid">
                <Radio value={'1'}>可以发表，但是需要审核</Radio>
                <Radio value={'2'}>禁止发表</Radio>
                </Radio.Group>)}
            </FormItem>
            <FormItem label={'规则提示'} >
              {form.getFieldDecorator('post_limit_prompt', {
                initialValue: siteDescJson.length>0?siteDescJson[0].lang_content : parseData('post_limit_prompt',dataFormValues),
                // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
              })(<Input readOnly
                onClick={() => {
                  setFieldTitle('post_limit_prompt');
                  if(siteDescJson && siteDescJson.length>0){
                    setnameList(siteDescJson);
                  }else{
                    setnameList(JSON.parse(JSON.stringify(common?.languagesOption)));
                  }
                  handleDataModalVisible(true);
                 }}
               />)}
            </FormItem>
            <FormItem label={'白名单配置'}>
              {form.getFieldDecorator('post_limit_whitelist', {
                initialValue:  JSON.parse(parseData('post_limit_whitelist',dataFormValues)),
                // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
              })(<Select mode="multiple" placeholder={formatMessage({ id: 'app.base.please_select' })} size={'default'} style={{ width: '100%' }}>
                {common?.memberRoleOption && buildSelectOption(common?.memberRoleOption)}
                </Select>)}
            </FormItem>
          </Card>
        </Col>
      </Row>
      }
      

      <Row>
        <Col span={14}>
      <FormItem 
      labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}
      label={
        <span>
          <FormattedMessage id="帖子编辑权限" />
        </span>
      }>
        {form.getFieldDecorator('post_edit', {
          initialValue: parseData('post_edit',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Radio.Group buttonStyle="solid">
        <Radio value={false}>不可编辑</Radio>
        <Radio value={true}>可以编辑</Radio>
      </Radio.Group>)}
      </FormItem>
    </Col>
    <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}>帖子发表后是否可以编辑</span>
        </Col>
    </Row>
    {
      form.getFieldValue('post_edit') == true && 
      <Row>
        <Col style={{display: 'flex', justifyContent: 'flex-start',}}>
          <Card title="帖子编辑配置" type="inner"  style={{width: "52.5%",marginLeft: '12%'}}>
            <FormItem label={'多长时间内可以编辑'} >
              {form.getFieldDecorator('post_edit_timelimit', {
                initialValue: parseData('post_edit_timelimit',dataFormValues),
                // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
              })(<Input  style={{width:'100%'}} suffix="分钟以内"/>)}
            </FormItem>
            <FormItem label={'帖子置顶后编辑权限'}>
              {form.getFieldDecorator('post_edit_sticky', {
                initialValue: parseData('post_edit_sticky',dataFormValues),
                // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
              })(<Radio.Group buttonStyle="solid">
              <Radio value={false}>不可编辑</Radio>
              <Radio value={true}>可以编辑</Radio>
                </Radio.Group>)}
            </FormItem>
            <FormItem label={'帖子加精后编辑权限'}>
              {form.getFieldDecorator('post_edit_essence', {
                initialValue: parseData('post_edit_essence',dataFormValues),
                // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
              })(<Radio.Group buttonStyle="solid">
              <Radio value={false}>不可编辑</Radio>
              <Radio value={true}>可以编辑</Radio>
                </Radio.Group>)}
            </FormItem>
          </Card>
        </Col>
      </Row>
    }

    <Row>
      <Col span={14}>
      <FormItem 
      labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}
      label={
        <span>
          <FormattedMessage id="编辑器选择" />
        </span>
      }>
        {form.getFieldDecorator('post_editor_service', {
          initialValue: parseData('post_editor_service',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Select placeholder={formatMessage({ id: 'app.base.please_select' })} size={'default'} style={{ width: '100%' }}>
        {common?.mapOption  && TsxHelper.buildSelectOption(common?.mapOption )}
      </Select>)}
      </FormItem>
      </Col>
      <Col offset={1} span={7}>
            <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}>发表帖子的编辑器</span>
          </Col>
      </Row>
    <Row>
        <Col span={24}>
      <FormItem label={'帖子编辑器功能开启'} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} className={styles.check}>
        {form.getFieldDecorator('post_editor_number', {
          initialValue: [
            parseData('post_editor_group',dataFormValues)? 'post_editor_group':'',
            parseData('post_editor_title',dataFormValues)? 'post_editor_title':'',
            parseData('post_editor_emoji',dataFormValues)? 'post_editor_emoji':'',
            parseData('post_editor_image',dataFormValues)? 'post_editor_image':'',
            parseData('post_editor_video',dataFormValues)? 'post_editor_video':'',
            parseData('post_editor_audio',dataFormValues)? 'post_editor_audio':'',
            parseData('post_editor_doc',dataFormValues)? 'post_editor_doc':'',
            parseData('post_editor_at',dataFormValues)? 'post_editor_at':'',
            parseData('post_editor_hashtag',dataFormValues)? 'post_editor_hashtag':'',
            parseData('post_editor_expand',dataFormValues)? 'post_editor_expand':'',
            parseData('post_editor_lbs',dataFormValues)? 'post_editor_lbs':'',
            parseData('post_editor_anonymous',dataFormValues)? 'post_editor_anonymous':'',
        ],
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Checkbox.Group onChange={(list)=>{console.log(list)}}>
              <div style={{padding: '.75rem 1.25rem',border: '1px solid rgba(0,0,0,.125)'}}>
              <Checkbox value="post_editor_group">小组</Checkbox>
              <Checkbox value="post_editor_title">标题</Checkbox>
              </div>
              <div style={{padding: '.75rem 1.25rem',border: '1px solid rgba(0,0,0,.125)',borderTop:'none',borderBottom:'none'}}>
              <Checkbox value="post_editor_emoji">表情</Checkbox>
              <Checkbox value="post_editor_image">图片</Checkbox>
              <Checkbox value="post_editor_video">视频</Checkbox>
              <Checkbox value="post_editor_audio">音频</Checkbox>
              <Checkbox value="post_editor_doc">文件</Checkbox>
              <Checkbox value="post_editor_at">艾特</Checkbox>
              <Checkbox value="post_editor_hashtag">话题</Checkbox>
              <Checkbox value="post_editor_expand">扩展功能</Checkbox>
              </div>
              <div style={{padding: '.75rem 1.25rem',border: '1px solid rgba(0,0,0,.125)'}}>
              <Checkbox value="post_editor_lbs">定位</Checkbox>
              <Checkbox value="post_editor_anonymous">匿名</Checkbox>
              </div>
              
          </Checkbox.Group>)}
      </FormItem>
    </Col>
  </Row>
  </Card>

    <Card title={'帖子编辑器功能配置'} bordered={false}>
    {form.getFieldValue("post_editor_number").indexOf('post_editor_group') > -1 &&
    <Row>
        <Col span={14}>
          <FormItem 
          labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} 
          label={
            <span>
              <FormattedMessage id="小组是否必选" />
            </span>
          }>
            {form.getFieldDecorator('post_editor_group_required', {
              initialValue: parseData('post_editor_group_required',dataFormValues),
              // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
            })(<Radio.Group buttonStyle="solid" defaultValue={false}>
            <Radio value={false}>否</Radio>
            <Radio value={true}>是</Radio>
          </Radio.Group>)}
          </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}>发表帖子的时候，小组是否必须选择</span>
        </Col>
        </Row>
      }
      {form.getFieldValue("post_editor_number").indexOf('post_editor_title') > -1 &&
      <>
        <Row>
          <Col span={14}>
            <FormItem 
            labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}
            label={'标题输入框显示'}>
              {form.getFieldDecorator('post_editor_title_view', {
                initialValue: parseData('post_editor_title_view',dataFormValues),
              })(<Radio.Group buttonStyle="solid">
              <Radio value={'1'}>弱显示</Radio>
              <Radio value={'0'}>强显示</Radio>
            </Radio.Group>)}
            </FormItem>
          </Col>
          <Col offset={1} span={7}>
            <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}>弱显示需用户手动选择后才会显示标题输入框</span>
          </Col>
        </Row>
        <Row>
        <Col span={14}>
          <FormItem 
          labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} 
          label={
            <span>
              <FormattedMessage id="标题是否必填" />
            </span>
          }>
            {form.getFieldDecorator('post_editor_title_required', {
              initialValue: parseData('post_editor_title_required',dataFormValues),
              // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
            })(<Radio.Group buttonStyle="solid" defaultValue={false}>
            <Radio value={false}>否</Radio>
            <Radio value={true}>是</Radio>
          </Radio.Group>)}
          </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}>发表帖子的时候，标题是否必填</span>
        </Col>
      </Row>

      <Row>
        <Col span={14}>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}  label={'标题字数上限'}>
          {form.getFieldDecorator('post_editor_title_word_count', {
            initialValue:  parseData('post_editor_title_word_count',dataFormValues) || null,
            // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
          })(<InputNumber max={255}  style={{width:'100%'}} />)}
          </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{display:'block',marginTop:2}}>标题字数不得超过设置数，最大上限 255 个字符。</span>
        </Col>
      </Row>
    </>
    }
    <Row>
      <Col span={14}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'帖子字数上限'} >
          {form.getFieldDecorator('post_editor_word_count', {
            initialValue: parseData('post_editor_word_count',dataFormValues) || null,
            // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
          })(<InputNumber min={140}  style={{width:'100%'}} />)}
        </FormItem>
      </Col>
      <Col offset={1} span={7}>
        <span style={{display:'block',marginTop:2}}> 帖子字数不得超过设置数，最小上限 140 个字符。</span>
      </Col>
    </Row>
    <Row>
      <Col span={14}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'帖子摘要字数'} >
          {form.getFieldDecorator('post_editor_brief_count', {
            initialValue: parseData('post_editor_brief_count',dataFormValues) || null,
            // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
          })(<InputNumber min={140}  style={{width:'100%'}} />)}
        </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{display:'block',marginTop:2}}> 帖子超过该设定值将采用摘要，超长内容摘要字数。</span>
        </Col>
    </Row>
    </Card>

    <Col span={24}>
      <div style={{display: 'flex',justifyContent:'center',marginTop:20,}}>
        <Button type="primary" style={{marginLeft:30}} onClick={()=>{okHandle()}}>保存</Button>
      </div>
    </Col>
    <DataLang
        dataModalVisible={dataLangModalVisible}
        isUpdate={isUpdate}
        dataFormValues={dataFormValues}
        common={common || {}}
        // name={modalName}
        nameList={nameListLang}
        title={fieldTitle}
        onSubmit={handleSubmitDataForm}
        onCancel={() => handleDataModalVisible(false)}
    />
    {
      previewModelVisible && (
        <PreviewForm
          previewModelVisible={previewModelVisible}
          onVisibleModel={handlePreviewModalVisible}
          previewImg={previewImg}
        />
      )
    }
  </div>;
};

export default Form.create<DataFormProps>()(DataForm);
